<template>
  <div class="Books">
    <div class="cons">
	  <!-- <div class="title border-bottom">
		<span class="kind" style="color: #000000;">类别</span>
		<span class="name">书名</span>
		<span class="chapter">章节</span>
		<span class="author" style="color: #000000;">作者</span>
		<span class="number" style="color: #000000;">字数</span>
		<span class="time">更新时间</span>
	  </div>
	  <ul class="books-ul">
		<li class="books-li" v-for="item of booksIn" :key="item.b_id">
		  <span class="kind" id="kind" @click="bktype(item.b_type)">[{{item.b_type}}]</span>
		  <router-link :to="{path:'/chapter',query:{id:item.b_id,title:item.b_title}}"><span class="name">{{item.b_title}}</span></router-link>
		  <span class="chapter">\</span>
		  <span class="author">{{item.b_author}}</span>
		  <span class="number">{{item.b_num}}</span>
		  <span class="time">2020.3.14</span>
		</li>
	  </ul> -->
	  
	 <el-table :data = "booksIn.slice((currentPage-1)*pagesize,currentPage*pagesize)" >
	  	<el-table-column type="selection" ></el-table-column>
	  	<el-table-column label="item.b_type" prop="类别"></el-table-column>
	  	<el-table-column label="b_title" prop="书名"></el-table-column>
	  	<el-table-column label="b_desc" prop="章节"></el-table-column>
	  	<el-table-column label="b_author" prop="作者"></el-table-column>
	  	<el-table-column label="b_num" prop="字数"></el-table-column>
	  	<el-table-column label="b_tags" prop="更新时间"></el-table-column>
	  	<el-table-column label="download_num" prop="download_num"></el-table-column>
	  </el-table>
	  <el-pagination @current-change="current_change" layout="total, prev, pager, next, jumper" :page-size="5" :total="total"></el-pagination>
	</div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:'Books',
  data(){
    return {
		total: 1000,
		pagesize:5,
		currentPage:1,
		booksIn:[],
	}
  },
  methods:{
		addBooksinfo(){
			// var id = this.b_id
			// console.log(id)
			axios.post(('http://localhost:3000/api/user/searchBookInfo'), {
			  // username: name,
			  // password: password
			  // title:title
			}, {}).then((response) => { 
				// console.log(response.data); 
				
				// var a = JSON.stringify(response.data);
				// console.log('a:'+response.data[2])
				
				// console.log('a:'+JSON.stringify(response.data[2]))
				var d = []
				for(var i = 0;i < 30;i++){
					var dat = JSON.stringify(response.data[i])
					// console.log(dat)
					var dat2 = JSON.parse(dat)
					// console.log(dat2)
					d.push(dat2)
					// console.log(d)
				}
				var c= this.booksIn = d
				// console.log(c[0].b_id)
				console.log(c)
			})
		},
		bktype(item){
			// console.log(item)
			axios.post(('http://localhost:3000/api/user/searchBookType'),{
				title:item
			},{}).then((response)=>{
				this.$router.push({path:'/booktype',query:{title:item}})
				// console.log(response.data)
			})
			
		},
		// current_change:function(currentPage){
		//     var page = this.currentPage = currentPage;
		// 	console.log('currentPage:' + page)
		// }
	},
	created:function(){
		var a = this.booksIn = this.booksIn.length;
		// this.total= this.tableData.length;
		console.log(a);
	},
	mounted(){
		// this.getBooksInfo()
		this.addBooksinfo();
	}
}
</script>

<style scoped>
span{
  display: inline-block;
}
.Books {
  margin: 15px 50px 0 50px;
  width: 92%;
  height: 300px;
}

.title{
  border-bottom: 1px dotted #ccc;
  letter-spacing: .86px;
  line-height: 40px;
  overflow: hidden;
  height: 40px;
  width: 100%;
}
.kind{
  width: 85px;
  padding-right: 15px;
  color: #CACACA;
}
.kind:hover{
	cursor: pointer;
}
.name{
  width: 250px;
  /* color: #000000; */
}
.chapter{
  width: 380px;
}
.author{
  width: 180px;
  color: #CACACA;
}
.number{
  width: 100px;
  color: #CACACA;
}
.time{
  width: 155px;
}
.books-ul{
}
.books-li{
  height: 40px;
  line-height: 40px;
  border-bottom: 1px #CCCCCC solid;
}
</style>